extends ./panel.pug

block title
  | #[span.icon-tags] #[span.icon-spin1.animate-spin.save-mark(title="Saving Annotations")] #{title}

block content
  .btn-group.h-hide-show-buttons(role='group')
    .btn-group.btn-group-sm(role='group')
      button.btn.btn-default.h-show-all-annotations(type='button', title='Show all annotations.  Keyboard shortcut: a')
        | #[span.icon-eye]
    .btn-group.btn-group-sm(role='group')
      button.btn.btn-default.h-hide-all-annotations(type='button', title='Hide all annotations.  Keyboard shortcut: a')
        | #[span.icon-eye-off]
    span.h-annotation-opacity-container(title=`Annotation total opacity ${(opacity * 100).toFixed()}%`)
      input#h-annotation-opacity(
          type="range", min="0", max="1", step="0.01", value=opacity)
    span.h-annotation-fill-opacity-container(title=`Annotation fill opacity ${(fillOpacity * 100).toFixed()}%`)
      input#h-annotation-fill-opacity(
          type="range", min="0", max="1", step="0.01", value=fillOpacity)
    .btn-group.btn-group-sm(role='group')
      button.btn.btn-default.h-annotation-select-by-region(type='button', title='Select annotations by region.  Keyboard shortcut: s')
        | #[span.icon-marquee]

  - var groups = _.keys(annotationGroups);
  - groups.sort();
  each groupName in groups
    - var annotations = annotationGroups[groupName];
    - var expanded = expandedGroups.has(groupName);
    - var expandedClass = expanded ? 'h-group-expanded' : 'h-group-collapsed';
    .h-annotation-group(class=[expandedClass], data-group-name=groupName)
      .h-annotation-group-name.clearfix
        if expanded
          i.icon-folder-open
        else
          i.icon-folder
        = groupName
      if expanded
        - var admin = user && user.get && user.get('admin');
        each annotation in annotations
          - var name = annotation.get('annotation').name;
          - var displayed = annotation.get('displayed');
          - var partial = annotation._centroids && annotation._centroids.partial
          - var loading = annotation.get('loading');
          - var classes = [];
          if annotation.id === activeAnnotation
            - classes.push('h-active-annotation');
          if annotation.get('highlight')
            - classes.push('h-highlight-annotation')
          .h-annotation(data-id=annotation.id, class=classes)
            if loading
              span.icon-spin3.animate-spin.h-float-left
            else if displayed
              span.icon-eye.h-toggle-annotation.h-float-left(
                title='Hide annotation' + (partial ? '.  Annotation is only partially loaded' : ''), class=partial ? 'partial' : '')
            else
              span.icon-eye-off.h-toggle-annotation.h-float-left(
                title='Show annotation')
            span.h-annotation-name(title=name) #{name}

            span.h-annotation-right
              if writeAccess(annotation)
                span.icon-cancel.h-delete-annotation(
                    title='Remove annotation')
                span.icon-cog.h-edit-annotation-metadata(
                    title='Edit annotation')
              a(href=annotation.downloadUrl().replace(/\/download$/, ''),
                  download=name + '.json')
                span.icon-download.h-download-annotation(
                    title='Download annotation')

  .checkbox.h-annotation-toggle
    label(title='Show annotation labels when hovering with the mouse.')
      input#h-toggle-labels(type='checkbox', checked=showLabels)
      | Labels
    label(title='Highlight annotations when hovering with the mouse.')
      input#h-toggle-interactive(type='checkbox', checked=interactiveMode)
      | Interactive
    if accessLevel >= writeAccessLevel
      button.btn.btn-sm.btn-primary.h-create-annotation
        | #[span.icon-plus-squared] New
    .clearfix
